<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    
    <title>流量来源数据看板</title>

</head>
<body>
<div class="container-fluid">

    <div class="row" align="center" style="margin-bottom:8px; margin-top:5px;">
        <form class="form-inline" action="$!{__beat.server.contextPath}/netflow/source" method="post">
                <div class="form-group" style="width:180px">
                    <label for="businessName" style="padding-left:15px;">业务线：</label>
                    <select id="businessName" name="businessName" class="form-control input-sm" style="align:center; width:100px; ">
                        #foreach($buss in $businessList)
                             <option value="$buss" #if("$buss" == $!businessName) selected #end>$business_CN_Map.get("$buss")</option>
                        #end  
                    </select>
                </div>  
                <div class="form-group">                       
                    <input type="submit" value="查询" class="btn btn-primary btn-xs"> 
                </div>
        </form>
    </div>

    <div class="dataconWrap">
        <div class="datacontent" id="qsContent">
            <div class="dataTit"><!-- 整体流量   -->
                <i class="mark"></i><span>$!{businessName_CN}PC端流量来源数据</span>
            </div>
            <div class="dataShow">
                <div id='sourceOption_pc' dateGrp='stat_date' indexType='uv'>
                    <form class="form-inline">
                        <div  class="input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_pc" type="checkbox">
                            </span>
                            <input id="time_input_pc" type="text" class="form-control time" placeholder="添加对比"  disabled>
                        </div>
                        <div class="input-group input-group-sm" style="margin-left: 26.5%">
        					<select id="index_source_pc" class="form-control">
                                <option value="pv">PV</option>
                                <option value="uv" selected>UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-uv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
        				</div>                
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnSource_pc" dateGrp='stat_date'>日</button>
                            <button type="button" class="btn btn-default btnSource_pc" dateGrp='week_begin'>周</button>
                            <button type="button" class="btn btn-default btnSource_pc" dateGrp='month_num'>月</button>
                        </div> 
                    </form>              
                </div>
                
                <div id="total_source_pc" style="height:400px"></div>
            </div>
        </div> <!-- datacontent  -->

        <div class="datacontent" id="qsContent">
            <div class="dataTit"><!-- 整体流量   -->
                <i class="mark"></i><span>$!{businessName_CN}PC端流量一级来源数据</span>
            </div>
            <div class="dataShow">
                <div id='sourceOption_pcSrc1' dateGrp='stat_date' indexType='uv'>
                    <form class="form-inline">
                        <div  class="input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_pcSrc1" type="checkbox">
                            </span>
                            <input id="time_input_pcSrc1" type="text" class="form-control time" placeholder="添加对比"  disabled>
                        </div>
                        <div class="input-group input-group-sm" style="margin-left: 26.5%">
                            <select id="index_source_pcSrc1" class="form-control">
                                <option value="pv">PV</option>
                                <option value="uv" selected>UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-uv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
                        </div>                
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnSource_pcSrc1" dateGrp='stat_date'>日</button>
                            <button type="button" class="btn btn-default btnSource_pcSrc1" dateGrp='week_begin'>周</button>
                            <button type="button" class="btn btn-default btnSource_pcSrc1" dateGrp='month_num'>月</button>
                        </div>
                    </form>               
                </div>
                
                <div id="total_source_pcSrc1" style="height:400px"></div>
            </div>
        </div>



        <div class="datacontent" id="qsContent">
            <div class="dataTit"><!-- 整体流量   -->
                <i class="mark"></i><span>$!{businessName_CN}PC端流量二级来源数据</span>
            </div>
            <div class="dataShow">
                <div id='sourceOption_pc2' dateGrp='stat_date' indexType='uv'>
                    <form class="form-inline">
                        <div  class="form-group input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_pc2" type="checkbox">
                            </span>
                            <input id="time_input_pc2" type="text" class="form-control  input-sm" placeholder="添加对比"  disabled>
                        </div>

                        <div class="form-group" style="width:230px;margin-left: 16.5%">
                            <label for="source1_name_pc" style="padding-left:15px;">一级来源：</label>
                            <select id="source1_name_pc" class="form-control input-sm" style="align:center; width:120px; ">
                                     <option value="广告系列">广告系列</option>
                                     <option value="SEO">SEO</option>
                            </select>
                        </div>    

                        <div class="form-group" >
                            <select id="index_source_pc2" class="form-control input-sm" style="align:center; width:100px;" >
                                <option value="pv">PV</option>
                                <option value="uv" selected>UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-uv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
                        </div>                
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnSource_pc2" dateGrp='stat_date'>日</button>
                            <button type="button" class="btn btn-default btnSource_pc2" dateGrp='week_begin'>周</button>
                            <button type="button" class="btn btn-default btnSource_pc2" dateGrp='month_num'>月</button>
                        </div>
                    </form>               
                </div>
                
                <div id="total_source_pc2" style="height:400px"></div>
            </div>
        </div>

        <div class="datacontent" id="qsContent">
            <div class="dataTit"><!-- 整体流量   -->
                <i class="mark"></i><span>$!{businessName_CN}PC端流量来源细分数据</span>
            </div>
            <div class="dataShow">
                <div id='sourceOption_pcSrc2' dateGrp='stat_date' indexType='uv'>
                    <form class="form-inline">
                        <label for="beginDate_pcSrc2">时间段: </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="beginDate_pcSrc2" type="text"  class="form-control input-sm time" placeholder="选择起始时间" value="$!maxDate"/>
                        </div>
                        <label for="beginDate_pcSrc2"> ---  </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="endDate_pcSrc2" type="text" class="form-control input-sm time" placeholder="选择结束时间" value="$!maxDate"/>
                         </div>
                         <button id="refreshPc_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
                        <div class="form-group" style="margin-left: 16%">
                            <select id="index_source_pcSrc2" class="form-control input-sm" >
                                <option value="pv">PV</option>
                                <option value="uv" selected>UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-uv</option>
                            </select>
                        </div>
                    </form>           
                </div>
                
                <div id="total_source_pcSrc2" style="height:400px"></div>
            </div>
        </div>     <!-- datacontent  -->

        <div class="datacontent" id="qsContent">
            <div class="dataTit"><!-- 整体流量   -->
                <i class="mark"></i><span>$!{businessName_CN}M端流量来源数据</span>
            </div>
            <div class="dataShow">
                <div id='sourceOption_m' dateGrp='stat_date' indexType='uv'>
                    <form class="form-inline">
                        <div  class="input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_m" type="checkbox">
                            </span>
                            <input id="time_input_m" type="text" class="form-control time" placeholder="添加对比"  disabled>
                        </div>
                        <div class="input-group input-group-sm" style="margin-left: 26.5%">
                            <select id="index_source_m" class="form-control">
                                <option value="pv">PV</option>
                                <option value="uv" selected>UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-pv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
                        </div>                
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnSource_m" dateGrp='stat_date'>日</button>
                            <button type="button" class="btn btn-default btnSource_m" dateGrp='week_begin'>周</button>
                            <button type="button" class="btn btn-default btnSource_m" dateGrp='month_num'>月</button>
                        </div>
                    </form>               
                </div>
                
                <div id="total_source_m" style="height:400px"></div>
            </div>
        </div> <!-- datacontent  -->

        <div class="datacontent" id="qsContent">
            <div class="dataTit"><!-- 整体流量   -->
                <i class="mark"></i><span>$!{businessName_CN}M端流量二级来源数据</span>
            </div>
            <div class="dataShow">
                <div id='sourceOption_m2' dateGrp='stat_date' indexType='uv'>
                    <form class="form-inline">
                        <div  class="form-group input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_m2" type="checkbox">
                            </span>
                            <input id="time_input_m2" type="text" class="form-control input-sm" placeholder="添加对比"  disabled>
                        </div>

                        <div class="form-group" style="width:230px;margin-left: 16.5%">
                            <label for="source1_name_m" style="padding-left:15px;">一级来源：</label>
                            <select id="source1_name_m" class="form-control input-sm" style="align:center; width:120px; ">
                                     <option value="渠道">渠道</option>
                                     <option value="SEO">SEO</option>
                            </select>
                        </div>   

                        <div class="form-group">
                            <select id="index_source_m2" class="form-control input-sm"  style="align:center; width:100px;" >
                                <option value="pv">PV</option>
                                <option value="uv" selected>UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-pv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
                        </div>                
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnSource_m2" dateGrp='stat_date'>日</button>
                            <button type="button" class="btn btn-default btnSource_m2" dateGrp='week_begin'>周</button>
                            <button type="button" class="btn btn-default btnSource_m2" dateGrp='month_num'>月</button>
                        </div>
                    </form>               
                </div>
                
                <div id="total_source_m2" style="height:400px"></div>
            </div>
        </div>


        

        <div class="datacontent" id="qsContent">
            <div class="dataTit">
                <i class="mark"></i><span>$!{businessName_CN} M端三级来源数据</span>
            </div>
 
            <div class="dataShow">
                <div id='mSrc3_option' dateGrp='stat_date' statType='day'>
                    <form class="form-inline">
                        <label for="beginDate_mSrc3">时间段: </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="beginDate_mSrc3" type="text"  class="form-control input-sm time" placeholder="选择起始时间" value="$!maxDate"/>
                        </div>
                        <label for="endDate_mSrc3"> ---  </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="endDate_mSrc3" type="text" class="form-control input-sm time" placeholder="选择结束时间" value="$!maxDate"/>
                         </div>

                        <div class="form-group" style="width:155px; margin-left:3px">
                            <label for="source_mSrc3">二级来源：</label>
                            <select id="source_mSrc3" class="form-control  input-sm" style="width:80px; ">
                                     <option value="付费浏览器">付费浏览器</option>
                                     <option value="联盟">联盟</option>
                                     <option value="付费其他">付费其他</option>
                            </select>
                        </div>

                         <button id="refresh_mSrc3_pie_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

                        <div class="form-group input-group input-group-sm" style="width: 13%;margin-left:3%">
                            <span class="input-group-addon">
                                <input id="time_checkbox_mSrc3" type="checkbox">
                            </span>
                            <input id="time_input_mSrc3" type="text" class="form-control input-sm" placeholder="添加对比" disabled>
                        </div>

                        <div class="form-group" style="width:140px; margin-left:5px">
                            <label for="index_mSrc3">指标：</label>
                            <select id="index_mSrc3" class="form-control  input-sm" style="width:90px; ">
                                <option value="pv">PV</option>
                                <option value="uv" selected>UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-pv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
                        </div> 

                        <!-- <button id="refresh_pcSrc2_line_btn" type="button" class="btn btn-default form-control input-sm">刷新</button> -->

                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnMSrc3" dateGrp='stat_date' statType='day'>日</button>
                            <button type="button" class="btn btn-default btnMSrc3" dateGrp='week_begin' statType='week'>周</button>
                            <button type="button" class="btn btn-default btnMSrc3" dateGrp='month_num' statType='month'>月</button>
                        </div>
                    </form>
                </div>

                
                    <div id="tip_source3" class="row" style="height:380px; width:100%; display:table; ">
                        <div  style="display:table-cell; text-align:center; vertical-align:middle;">
                            <h3>该来源下暂无细分数据,请查看上图。</h3>
                        </div>
                    </div>

                <div id="show_source3"  class="row">
                    <div id="source3_pie" class="col-md-6"  style="height:380px;"></div>
                    <div id="source3_line" class="col-md-6"  style="height:380px;"></div>
                </div>
             </div><!-- dataShow  -->

    </div> <!-- datacontent  -->  


        <div class="datacontent" id="qsContent">
            <div class="dataTit"><!-- 整体流量   -->
                <i class="mark"></i><span>$!{businessName_CN}M端流量来源细分数据</span>
            </div>
            <div class="dataShow">
                <div id='sourceOption_mSrc2' dateGrp='stat_date' indexType='uv'>
                    <form class="form-inline">
                        <label for="beginDate_mSrc2">时间段: </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="beginDate_mSrc2" type="text"  class="form-control  input-sm" placeholder="选择起始时间" value="$!maxDate"/>
                        </div>
                        <label for="beginDate_mSrc2"> ---  </label>
                        <div class="form-group input-group input-group-sm" style="width: 10%;">
                            <input id="endDate_mSrc2" type="text" class="form-control input-sm" placeholder="选择结束时间" value="$!maxDate"/>
                         </div>
                        <button id="refreshM_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
                        <div class="form-group" style="margin-left: 16%">
                            <select id="index_source_mSrc2" class="form-control input-sm">
                                <option value="pv">PV</option>
                                <option value="uv" selected>UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-uv</option>
                            </select>
                        </div>
                    </form>           
                </div>
                
                <div id="total_source_mSrc2" style="height:400px"></div>
            </div>
        </div> 

    </div> 
</div>

</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/source/echarts.js"></script>
<!-- <script src="$!{__beat.server.contextPath}/js/wnl.js"></script> -->
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">
    var cate = "$!{businessName}";
    var dayMap={1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六",0:"周日"};
    var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
		orientation: "top left",
        startDate:"2014-01-01",
        endDate:"$!maxDate"
    };
    
    //获取星期几 dayDate 的格式为 yyyy-MM-dd
    function getWeekDay(dayDate){
        var jsDate = new Date(Date.parse(dayDate.replace(/\-/g,'/')));
        var weekNumber = jsDate.getDay();
        return dayMap[weekNumber];
    }

	function setDatePicker(ec,dateGrp,input){
        if('week_begin'==dateGrp){
        }else if('month_num'==dateGrp){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyy-mm';
        }else{
            datepicker_op.minViewMode=0;
            datepicker_op.format='yyyy-mm-dd';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
        //获取显示的日期数组
        var days_show=ec.getShowDays();
        var days_all=ec.getAllDays();
        //设置时间可选范围
        input.datepicker('setStartDate',new Date(getDate(days_all[0])));
        input.datepicker('setEndDate',new Date(getDate(days_all[days_all.length-days_show.length])));
    }

    function getDate(yyyymmdd){
        if(yyyymmdd.length==10){        //yyyy-MM-dd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(5,2)+'/'+yyyymmdd.substr(8,2));
        }else if(yyyymmdd.length==8){   //yyyyMMdd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2)+'/'+yyyymmdd.substr(6,2));
        }else if(yyyymmdd.length==6){    //yyyyMM
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2));
        }
    }

    function changeDateGrp(item){
        var dateGrpVal = $(item).attr('dateGrp');
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('dateGrp',dateGrpVal);
    }

    function changeIndex(item){
        var indexVal = $(item).val();
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('indexType',indexVal);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
    });
    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/source",dashboard: "$!{__beat.server.contextPath}/js/netflow"}});

    var charts = [];
    require(['dashboard/netflow_source_pc_v3'],function(sourceEC){
        charts.push(sourceEC);
        sourceEC.show(cate,2);
    });

    //pc一级来源数据
   require(['dashboard/netflow_source1_pc_v3'],function(sourceEC_pcSrc1){
        charts.push(sourceEC_pcSrc1);
        sourceEC_pcSrc1.show(cate,2);
    });


    //pc二级来源数据
   require(['dashboard/netflow_source2_pc_v3'],function(sourceEC_pc2){
        charts.push(sourceEC_pc2);
        sourceEC_pc2.show(cate,2);
    });


    //pc二级来源数据  饼图
    require(['dashboard/netflow_source2_pc_pie_v2'],function(sourceEC_pcSrc2){
        charts.push(sourceEC_pcSrc2);
        sourceEC_pcSrc2.show(cate);
        //选择指标
        $("#index_source_pcSrc2").change(function(){
            changeIndex(this);
            sourceEC_pcSrc2.show(cate);
        });

        //时间选择事件
        $('#beginDate_pcSrc2').datepicker(datepicker_op);
        $('#endDate_pcSrc2').datepicker(datepicker_op);
        $('#beginDate_pcSrc2').datepicker().on('changeDate', function (e) {
            $('#endDate_pcSrc2').datepicker('setStartDate', e.date);
        })

        $('#endDate_pcSrc2').datepicker().on ('changeDate', function (e) {
            $('#beginDate_pcSrc2').datepicker('setEndDate', e.date);
        });
        $("#refreshPc_btn").click(function(){
            sourceEC_pcSrc2.show(cate);
        });
    });

   //m端来源图
    require(['dashboard/netflow_source1_m_v3'],function(sourceEC_m){
        charts.push(sourceEC_m);
        sourceEC_m.show(cate,2);
    });

    //m二级来源数据
   require(['dashboard/netflow_source2_m_v3'],function(sourceEC_m2){
        charts.push(sourceEC_m2);
        sourceEC_m2.show(cate,2);
    });

    //m三级来源数据
   // require(['dashboard/netflow_source3_m_v4'],function(sourceEC_m3){
   //      charts.push(sourceEC_m3);
   //      sourceEC_m3.show(cate,2);
   //  });
   
       /* m三级来源*/
    require(['dashboard/netflow_source3_m_pie_v0'],function(sourceEC_m3){
        charts.push(sourceEC_m3);
        sourceEC_m3.show(cate);
    });

    //m二级来源数据  饼图
    require(['dashboard/netflow_source2_m_pie_v2'],function(sourceEC_mSrc2){
        charts.push(sourceEC_mSrc2);
        sourceEC_mSrc2.show(cate);
        //选择指标
        $("#index_source_mSrc2").change(function(){
            changeIndex(this);
            sourceEC_mSrc2.show(cate);
        });

        //时间选择事件
        $('#beginDate_mSrc2').datepicker(datepicker_op);
        $('#endDate_mSrc2').datepicker(datepicker_op);
        $('#beginDate_mSrc2').datepicker().on('changeDate', function (e) {
            $('#endDate_mSrc2').datepicker('setStartDate', e.date);
        });

        $('#endDate_mSrc2').datepicker().on ('changeDate', function (e) {
            $('#beginDate_mSrc2').datepicker ('setEndDate', e.date);
        });

        $("#refreshM_btn").click(function(){
            sourceEC_mSrc2.show(cate);
        });
    });

    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.echart.resize();
        });
    });
        
</script>
</html>